<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-alert title="信息提示的文案" />
      </view>
    </view>
    
    <!-- 不同类型 -->
    <view class="demo-block">
      <view class="demo-block__title">不同类型</view>
      <view class="demo-block__content">
        <fu-alert
          title="信息提示的文案"
          type="info"
          class="alert-item"
        />
        <fu-alert
          title="成功提示的文案"
          type="success"
          class="alert-item"
        />
        <fu-alert
          title="警告提示的文案"
          type="warning"
          class="alert-item"
        />
        <fu-alert
          title="错误提示的文案"
          type="error"
          class="alert-item"
        />
      </view>
    </view>
    
    <!-- 可关闭 -->
    <view class="demo-block">
      <view class="demo-block__title">可关闭</view>
      <view class="demo-block__content">
        <fu-alert
          v-model:show="show"
          title="可关闭的提示文案"
          closeable
          @close="onClose"
        />
      </view>
    </view>
    
    <!-- 带有辅助性文字 -->
    <view class="demo-block">
      <view class="demo-block__title">带有辅助性文字</view>
      <view class="demo-block__content">
        <fu-alert
          title="带有辅助性文字"
          description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。"
          class="alert-item"
        />
        <fu-alert
          title="带有辅助性文字"
          type="success"
          description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    onClose() {
      uni.showToast({
        title: '点击关闭',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    overflow: hidden;
    padding: 30rpx;
  }
}

.alert-item {
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}
</style> 